<template>
    <div class="data-table-example">
        <h2>DataTable 组件使用示例</h2>
        
        <!-- 示例 1: 分配表格 -->
        <div class="example-section">
            <h3>分配表格示例</h3>
            <DataTable 
                :headers="distributionHeaders"
                :data="distributionData"
            />
        </div>

        <!-- 示例 2: 功能表格 -->
        <div class="example-section">
            <h3>功能表格示例</h3>
            <DataTable 
                :headers="functionsHeaders"
                :data="functionsData"
            />
        </div>

        <!-- 示例 3: 简单表格（无图标） -->
        <div class="example-section">
            <h3>简单表格示例</h3>
            <DataTable 
                :headers="simpleHeaders"
                :data="simpleData"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 分配表格数据
const distributionHeaders = ref(['Category', 'Ratio', 'Quantity (Tokens)', 'Purpose Description'])
const distributionData = ref([
    [
        { text: 'Mining', icon: '/tokenFawa/icon-card.png' },
        '40%',
        '360 Million',
        'Reward community contributors and node operators, promote Depin infrastructure, computing & storage services'
    ],
    [
        { text: 'Ecological Build', icon: '/tokenFawa/icon-gift.png' },
        '25%',
        '225 million',
        'Support social apps, digital IP, RWA on-chain, brand globalization, DApp incubation'
    ],
    [
        { text: 'Foundation', icon: '/tokenFawa/icon-bank.png' },
        '10%',
        '90 Million',
        'Used for compliant operations, strategic investment, global promotion, and public welfare projects'
    ]
])

// 功能表格数据
const functionsHeaders = ref(['Function Category', 'Specific Application Scenario', 'Value Description'])
const functionsData = ref([
    [
        { text: 'Payment Function', icon: '/tokenFawa/icon-card.png' },
        'Platform internal payment, cross-border transfer, value exchange',
        'Reduces transaction costs, improves payment efficiency, and lowers the financial threshold for female users'
    ],
    [
        { text: 'Incentive Function', icon: '/tokenFawa/icon-gift.png' },
        'Mining rewards, node contribution, social interaction, content creation',
        'Motivates user participation, promotes ecosystem development, and creates a positive feedback loop'
    ]
])

// 简单表格数据（无图标）
const simpleHeaders = ref(['Name', 'Age', 'City', 'Occupation'])
const simpleData = ref([
    ['John Doe', '25', 'New York', 'Developer'],
    ['Jane Smith', '30', 'London', 'Designer'],
    ['Bob Johnson', '35', 'Tokyo', 'Manager']
])
</script>

<style lang="scss" scoped>
.data-table-example {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.example-section {
    margin-bottom: 60px;
    
    h3 {
        font-size: 24px;
        margin-bottom: 20px;
        color: #333;
    }
}
</style>
